<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        .container {
            display: flex;
            justify-content: space-between;
        }

        .right,
        .left {
            width: 45%;
        }

        .left {
            margin-left: 10px;
        }

        .right {
            margin-right: 10px;

        }

        #find {
            position: absolute;
            top: 10%;
            right: 5%;
            width: 30px;
            height: 30px;
            border: none;
            background-color: rgba(0, 0, 0, .0);
        }

        .findPartent {

            width: 60%;
            position: relative;
        }

        .txtSearch {
            padding-right: 30%;
            box-sizing: border-box;

        }

        .layui-btn-sm {
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            font-size: 12px;
        }
    </style>
</head>
<!-- 作者：黄萌 -->

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>
            <a href="./index.html" class="layui-btn layui-btn-sm">返回</a>
            <span id="spanTitle"></span>
            <!-- 当前的影院名称 -->
        </legend>
    </fieldset>
    <div class="container">
        <div class="left">
            <h2 style="text-align:center; margin: 15px 0; color:#1E9FFF">当前院线已上映电影表</h2>
            <table id="demo" lay-filter="test"></table>
        </div>
        <div class="right">
            <h2 style="text-align:center; margin: 15px 0; color:#FF5722">当前院线未上映电影表</h2>
            <table id="tabUnShow" lay-filter="tabUnShow"></table>

        </div>

    </div>

    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script src="../../js/lodash.min.js"></script>

    <script>
        let q = query(location.href);
        let cid = q.id;
        console.log(cid)
        // let cid = "5c37ecedfbf8ed6dfc64161a";//影院编号 为了测试的数据id
        let tableObj;
        //  渲染当前院线已上映电影表
        // 作者：黄萌
        layui.use(['table', 'layer'], function () {
            const table = layui.table;
            const layer = layui.table;
            //左边表格
            tableObj = table.render({
                elem: '#demo',
                url: '/api/MovieAndCinema/' + cid,//数据接口，模拟的接口
                page: true,
                autoSort: false, //禁用前端自动排序
                toolbar: '#toolbarDemoLeft',
                cols: [[
                    {
                        title: '类型',
                        templet: `<div> {{ d.movie.type}}</div>`
                    },
                    {
                        title: "名字",
                        templet: `<div> {{ d.movie.name}}</div>`

                    },
                    {
                        title: '时长',
                        templet: `<div> {{ d.movie.time}}</div>`
                    },
                    {
                        title: '评分',
                        templet: `<div> {{ d.movie.score}}</div>`
                    },
                    {
                        title: '操作',
                        templet: '<div class="layui-btn-container"><button class="layui-btn" onclick="AddCount(`{{d.movie._id}}`,`{{d.movie.name}}` ,`{{d.screens.length}}`,`{{d._id}}`,this)"><span id="movieCount">{{d.screens.length}}</span>个场次</button> <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="delMovie(`{{d.movie._id}}`, this)">下映</div>',
                        width: "28%",
                    }
                ]
                ]
            });
        })
        //id 电影的id
        // id电影id name 电影名字 screens 电影场次数 mid 电影对象id 
        function AddCount(id, name, screens, mid, btn) {
            layer.open({
                title: ['电影：' + name, 'font-size:18px;'],
                type: 2,
                content: './addcount.html?' + "id=" + id + "&cid=" + cid + "&mid=" + mid,
                area: ['800px', '450px'],
                end: function () {
                    let id = cid;
                    location.href = "./manage.html?id=" + id;
                }
            });
        }

        // 电影下映事件
        // 作者：黄萌
        function delMovie(id, btn) {
            layer.confirm('确定将该电影下映嘛？', function (index) {
                $.ajax({
                    url: "/api/MovieAndCinema/" + id,//该电影的id
                    method: "delete",
                    success: function () {
                       
                        location.href = "./manage.html?id=" + cid;
                    }
                });
                $(btn).parents("tr").remove();
                layer.close(index);
               
            });
        }
        //  渲染当前院线未上映电影表
        // 作者：黄萌
        layui.use('table', function () {
            const table = layui.table;
            //右边表格
            table.render({
                elem: '#tabUnShow',
                url: '/api/MovieAndCinema/unshow/' + cid,//数据接口，模拟的接口
                page: true,
                autoSort: false, //禁用前端自动排序
                toolbar: '#toolbarDemoRight',
                cols: [
                    [
                        {
                            field: 'name',
                            title: ' 名称'
                        },
                        {
                            field: 'type',
                            title: '  类型'
                        },
                        {
                            field: 'time',
                            title: '时长'
                        },
                        {
                            field: 'score',
                            title: '评分'
                        },
                        {

                            title: '操作',
                            templet: '<div class="layui-btn-container"><button class="layui-btn layui-btn-normal" onclick="upMoive(`{{d._id}}`,this)">上映</button></div>',

                        }]
                ]
            });

            // 当前院线未上映电影表模糊查询
            // 作者：黄萌
            table.on('toolbar(tabUnShow)', function (obj) {
                // var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'btnSubmit':
                        let key = $("#txtKey").val();
                        console.log(key);
                        layui.table.reload("tabUnShow", {
                            where: {
                                key,
                            },
                            page: {
                                curr: 1
                            }
                        })
                        break;
                    case 'btnReset':
                        $("#txtKey").val("")
                        $("#btnSubmit").click()
                        break;
                };
            });
        })
        // 电影上映事件
        // 作者：黄萌
        function upMoive(id, btn) {

            let data = {
                movieid: id,
                cinemaid: cid
            }

            layer.confirm('确定将该电影上映嘛？', {
                icon: 0,
                title: '提示'
            }, function (index) {
                $.ajax({
                    url: "/api/MovieAndCinema",
                    method: "post",
                    data,
                    success: function () {
                        $(btn).parents("tr").remove();
                        layer.close(index);
                        location.href = "./manage.html?id=" + cid;
                    }
                });
            });
        }




        //得到地址中模糊查询中的参数
        // 作者：黄萌
        function query(url) {
            const parts = url.split("?");
            if (parts.length == 1) {//地址中没有参数
                return {};
            }
            const obj = {};
            parts[1].split("&").map(item => item.split("=")).forEach(([p, v]) => {
                obj[p] = decodeURIComponent(v);
            });
            return obj;
        }
        // // 加载影院的名字
        //  作者：黄萌
        async function onland() {
            const cinemas = await $.get("/api/Cinema/" + cid);
            $("#spanTitle").text(cinemas.data.name);//当前电影院的名称
        };
        onland();
    </script>
    <!-- 渲染当前院线已上映电影表表头的样式  作者黄萌-->
    <script type="text/html" id="toolbarDemoLeft"></script>
    <!-- 当前院线未上映电影表表头的样式  作者黄萌-->
    <script type="text/html" id="toolbarDemoRight">
    <div class="layui-input-inline">
        <input type="text" id="txtKey" placeholder="请输入关键字" autocomplete="off" class="layui-input">
    </div>
    <button class="layui-btn" lay-event="btnSubmit" id="btnSubmit">查询</button>
    <button class="layui-btn" lay-event="btnReset" id="btnReset">重置</button>
    </script>




</body>

</html>